var map;
var markerList = [];
var userMarker = {};
var zoom = 15;
var playFlag = true;
$(document).ready(function () {
    map = new qq.maps.Map(document.getElementById("map"), {
        center: new qq.maps.LatLng(userLat, userLng),
        zoom: 17,
        mapTypeControl: false
    });
    qq.maps.event.addListener(map, 'click', function () {
        app.currentHall = null;
        for (i = 0; i < markerList.length; i++) {
            var marker = markerList[i];

            var anchor = new qq.maps.Point(16, 32),
                size = new qq.maps.Size(32, 32),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage('/images/location03.png', size, origin, anchor);
            marker.setIcon(icon);

        }
    });
    map.controls[qq.maps.ControlPosition.BOTTOM_RIGHT].push(document.getElementById("my_position"));
    map.controls[qq.maps.ControlPosition.TOP_RIGHT].push(document.getElementById("hall_list_btn"));

    initUserPosition();
    initHallList();
    qq.maps.event.addListener(map, 'bounds_changed', function () {
        var bounds = map.getBounds();
        initBounds(bounds);
    });
    map.setZoom(15);



});


function initUserPosition() {
    var anchor = new qq.maps.Point(16, 32),
        size = new qq.maps.Size(32, 32),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage('/images/location01.png', size, origin, anchor);

    userMarker = new qq.maps.Marker({
        position: new qq.maps.LatLng(userLat, userLng),
        icon: icon,
        animation: qq.maps.MarkerAnimation.DROP,
        map: map
    })
}

var initFlag = false;

function initBounds(bounds) {

    if (!initFlag) {
        var maxLat = bounds.getNorthEast().getLat();
        var maxLng = bounds.getNorthEast().getLng();
        var minLat = bounds.getSouthWest().getLat();
        var minLng = bounds.getSouthWest().getLng();
        var tempFlag = false;
        for (var i in hallList) {

            if (maxLat > hallList[i].latitude && maxLng > hallList[i].longitude && minLat < hallList[i].latitude && minLng < hallList[i].longitude) {
                tempFlag = true;
                break;
            }
        }
        if (tempFlag) {
            initFlag = true;
        }
        else {
            zoom--;
            map.setZoom(zoom);
        }
    }
}

function initHallList() {

    // for (var m in markerList) {
    //     markerList[m].setMap(null);
    // }
    //markerList.length = 0;


    for (var i in hallList) {
        (function (n) {
            var anchor = new qq.maps.Point(16, 32),
                size = new qq.maps.Size(32, 32),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage('/images/location03.png', size, origin, anchor);


            var hallMarker = new qq.maps.Marker({
                position: new qq.maps.LatLng(hallList[n].latitude, hallList[n].longitude),
                animation: qq.maps.MarkerAnimation.DROP,
                map: map,
                icon: icon
            });
            hallMarker.hallId = hallList[n].id;

            qq.maps.event.addListener(hallMarker, 'click', function () {
                showInfo(hallList[n]);
            });
            markerList.push(hallMarker);
        })(i);
    }


}

var app = new Vue({
    el: "#app",
    data: {
        currentHall: null,
        showList: false,
        hallList: hallList,
        showDetail: false,
        showPath: false,
        pathId: null,
        showInfo: false
    },
    computed: {
        showCurrentHall: function () {
            return this.currentHall != null;
        },
        hideList: function () {
            return !this.showList;
        },
        hideDetail: function () {
            return !this.showDetail;
        },
        hidePath: function () {
            return !this.showPath;
        },
        infoDisplay: function () {
            if (this.showInfo && !this.showList && !this.showDetail) {
                return "flex";
            }
            else {
                return "none";
            }
        },
        detailDisplay: function () {
            if (this.showDetail) {
                return "flex";
            }
            else {
                return "none";
            }
        },
        listDisplay: function () {
            if (this.showList) {
                return "block";
            }
            else {
                return "none";
            }
        },
        showPathDisplay: function () {
            if (!this.showPath) {
                return "flex";
            }
            else {
                return "none";
            }
        },
        hidePathDisplay: function () {
            if (this.showPath) {
                return "flex";
            }
            else {
                return "none";
            }
        }


    },
    created: function () {

    }
});

function showHallList() {
    app.showList = true;
    app.showDetail = false;
    app.showInfo = false;

}

function hideHallList() {
    app.showList = false;
}

function backToCenter() {
    map.setCenter(new qq.maps.LatLng(userLat, userLng));
    map.setZoom(zoom);
}

function showInfo(hall) {
    if (hall) {
        if (hall.id != app.pathId) {
            hidePath();
        }

        app.showList = false;
        app.showDetail = false;
        playFlag = false;
        app.currentHall = hall;
        app.showInfo = true;
        playFlag = true;
        map.setCenter(new qq.maps.LatLng(hall.latitude, hall.longitude));

        for (i = 0; i < markerList.length; i++) {
            var marker = markerList[i];
            if (marker.hallId == hall.id) {
                var anchor = new qq.maps.Point(16, 32),
                    size = new qq.maps.Size(32, 32),
                    origin = new qq.maps.Point(0, 0),
                    icon = new qq.maps.MarkerImage('/images/location02.png', size, origin, anchor);
                marker.setIcon(icon);

            }
            else {
                var anchor = new qq.maps.Point(16, 32),
                    size = new qq.maps.Size(32, 32),
                    origin = new qq.maps.Point(0, 0),
                    icon = new qq.maps.MarkerImage('/images/location03.png', size, origin, anchor);
                marker.setIcon(icon);
            }
        }

    }
}

function showInfoById(hallId) {
    var hall = getHallById(hallId);
    showInfo(hall);
}

var polyline = null;

var drivingService = new qq.maps.DrivingService({
    complete: function (response) {
        if (response.detail.routes.length > 0) {
            if (polyline != null) {
                polyline.setMap(null);
            }

            app.showList = false;
            var route = response.detail.routes[0];
            polyline = new qq.maps.Polyline(
                {
                    path: route.path,
                    strokeColor: '#3893F9',
                    strokeWeight: 6,
                    map: map
                }
            )
        }
    }
});

function showPath(hall) {
    //hideMenu();
    var start = new qq.maps.LatLng(userLat, userLng);
    var end = new qq.maps.LatLng(hall.latitude, hall.longitude);
    var newCenter = new qq.maps.LatLng((hall.latitude + userLat) / 2, (hall.longitude + userLng) / 2);
    map.setCenter(newCenter);
    app.showPath = true;
    app.pathId = hall.id;
    drivingService.search(start, end);
}

function hidePath() {
    //hideMenu();
    if (polyline) {
        polyline.setMap(null);
        polyline = null;
        app.showPath = false;
        app.pathId = null;
    }
}

function showPathById(id) {
    var hall = getHallById(id);
    app.currentHall = hall;
    showPath(hall);
}

function showDetail() {
    app.showDetail = true;
}

function hideDetail() {
    app.showDetail = false;
}


function getHallById(id) {
    for (var h in hallList) {
        if (hallList[h].id == id) {
            var hall = hallList[h];
            return hall;
        }
    }
    return null;
}


// function showMenu() {
//
//     $("#iosMask").show();
//     $("#iosActionsheet").show();
//     $("#iosActionsheet").animate({bottom:'236px'});
// }
//
//
// function hideMenu() {
//
//     $("#iosMask").hide();
//     $("#iosActionsheet").hide();
//     $("#iosActionsheet").animate({bottom:'0px'});
// }
//
// function naviWithBaiduMap() {
//     var url = "baidumap://map/direction?origin={{我的位置}}&destination="+app.currentHall.latitude+","+app.currentHall.longitude+"&mode=driving&coord_type=gcj02";
//     alert(url);
//     $(location).attr("href",url);
// }
//
// function naviWithTencentMap() {
//     wx.openLocation(
//         {
//             latitude:app.currentHall.latitude,
//             longitude:app.currentHall.longitude,
//             name:app.currentHall.hallName
//         }
//     );
// }
